<!-- 管理员相关 -->
<template>
  <div>
    <div class="content-padding" v-if="!modal.show">
      <a-form layout="inline" class="nmv-search-form-auto" :labelCol="{ style: 'width: 85px' }">

        <a-form-item label="所属企业">
          <a-select v-model="grid.queryParams.companyId" @change="searchQuery" placeholder="全部" allowClear show-search
            :filter-option="filterOption" class="nmv-w-200">
            <a-select-option v-for="(item, i) in companiesAllListFilter" :key="i" :value="+item.id">{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="所属门店">
          <a-select placeholder="全部" allowClear show-search :filter-option="filterOption" class="nmv-w-200"
            v-model="grid.queryParams.storeId" @change="searchQuery">
            <a-select-option v-for="item in storeList" :key="item.id" :value="+item.id">{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="车牌号">
          <a-input v-model="grid.queryParams.vehiclePlate" class="nmv-w-200" placeholder="请输入车牌号"></a-input>
        </a-form-item>

        <a-form-item label="审核状态">
          <a-select placeholder="全部" allowClear class="nmv-w-200" v-model="grid.queryParams.status"
            @change="searchQuery">
            <a-select-option :value="0">待审核</a-select-option>
            <a-select-option :value="1">审核通过</a-select-option>
            <a-select-option :value="2">审核不通过</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="原设备号">
          <a-input v-model="grid.queryParams.oldDeviceNo" class="nmv-w-200" placeholder="请输入原设备号"></a-input>
        </a-form-item>

        <a-form-item label="修改设备号">
          <a-input v-model="grid.queryParams.newDeviceNo" class="nmv-w-200" placeholder="请输入修改设备号"></a-input>
        </a-form-item>

        <a-form-item label="申请时间：">
          <a-range-picker style="width: 320px" v-model="grid.time" format="YYYY-MM-DD" :placeholder="['开始时间', '结束时间']"
            @change="rangeTimeOk"></a-range-picker>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="searchQuery">查询</a-button>
          <a-button style="margin-left:12px" @click="queryReset">重置</a-button>
        </a-form-item>

      </a-form>

      <a-table :loading="grid.load" :pagination="false" rowKey="id" :locale="locale" :columns="grid.columns"
        :data-source="grid.data" :scroll="{ x: 1300 }">
        <div slot="action" slot-scope="text, record">
          <permissions type="vehicle/deviceChangeManager/changeAudit/show">
            <a-button type="link" @click="onDetail(record)">
              查看
            </a-button>
          </permissions>
          <permissions type="vehicle/deviceChangeManager/changeAudit/audit" v-if="record.status === 0">
            <a-divider type="vertical" />
            <a-button type="link" @click="onAudit(record)">
              审核
            </a-button>
          </permissions>
        </div>
      </a-table>
      <div v-show="grid.total !== 0" style="text-align:right;">
        <a-pagination show-size-changer :current="grid.queryParams.pageNum" :pageSize="grid.queryParams.pageSize"
          @change="onChange" style="margin-top:20px;" size="small" @showSizeChange="onShowSizeChange"
          :total="grid.total" :show-total="total => `共${grid.total}条 `" />
      </div>
    </div>
    <div v-if="modal.show">
      <DeviceChangeAuditDetail ref="deviceChangeAuditDetailRefs" @close="onClose" />
    </div>
    <DeviceChangeAuditModal ref="deviceChangeAuditRefs" @getList="searchQuery" />
  </div>
</template>

<script>
import Empty from '@/components/Empty/Empty'
import permissions from '@/components/permissions'
import DeviceChangeAuditDetail from './modal/deviceChangeAuditDetail.vue'
import DeviceChangeAuditModal from './modal/deviceChangeAuditModal.vue'
import {
  getAllStore,
  companiesAllList
} from '@/services/rider'
import {
  deviceChangeAuditList
} from '@/services/car'
export default {
  name: 'DeviceChangeAudit',
  components: {
    permissions,
    DeviceChangeAuditDetail,
    DeviceChangeAuditModal
  },
  data () {
    return {
      locale: {
        emptyText: <Empty />
      },
      grid: {
        time: [],
        load: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        columns: [
          {
            title: '车牌号',
            dataIndex: 'vehiclePlate',
            key: 'vehiclePlate',
            width: 100,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '原设备号',
            dataIndex: 'oldDeviceNo',
            key: 'oldDeviceNo',
            width: 170,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '修改设备号',
            dataIndex: 'newDeviceNo',
            key: 'newDeviceNo',
            width: 170,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '审核状态',
            dataIndex: 'status',
            key: 'status',
            width: 130,
            customRender: (text, record) => text === 1 ? <div class="flex_start" >
              <div class="yuan green"></div>
              <div>审核通过</div>
            </div> : text === 0 ? <div class="flex_start" >
              <div class="yuan lightBlue"></div>
              <div>待审核</div>
            </div> : text === 2 ? <div class="flex_start" >
              <div class="yuan red"></div>
              <div>审核不通过</div>
            </div> : '-'
          },
          {
            title: '申请时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 180,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '所属企业',
            dataIndex: 'companyName',
            key: 'companyName',
            width: 130,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '所属门店',
            dataIndex: 'storeName',
            key: 'storeName',
            width: 160,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '操作',
            key: 'action',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            fixed: 'right',
            width: 130
          }
        ],
        data: []
      },
      companiesAllListFilter: [],
      storeList: [],
      modal: {
        show: false
      }
    }
  },
  created () {
    this.searchQuery(1)
    this.getCompaniesAllList()
    this.getStore()
  },
  methods: {
    onDetail (row) {
      this.modal.show = true
      this.$nextTick(() => {
        this.$refs.deviceChangeAuditDetailRefs.onInitial(row.id)
      })
    },
    onAudit (row) {
      this.$nextTick(() => {
        this.$refs.deviceChangeAuditRefs.open(row)
      })
    },
    onClose () {
      this.searchQuery()
      this.modal.show = false
    },
    rangeTimeOk (value) {
      if (value.length > 0) {
        const [start, end] = value
        this.grid.queryParams.applyTimeStart = start.format('YYYY-MM-DD')
        this.grid.queryParams.applyTimeEnd = end.format('YYYY-MM-DD')
      } else {
        delete this.grid.queryParams.applyTimeStart
        delete this.grid.queryParams.applyTimeEnd
        this.grid.time = []
      }
      this.getList()
    },
    onChange (page, pageSize) {
      this.grid.queryParams.pageNum = page
      console.log(pageSize)
      this.searchQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.grid.queryParams.pageSize = pageSize
      this.grid.queryParams.pageNum = 1
      console.log(current)
      this.searchQuery()
    },
    async getList () {
      this.grid.load = true
      const res = await deviceChangeAuditList(this.grid.queryParams)
      if (res.code === 200) {
        this.grid.data = res.data.records
        this.grid.total = res.data.total
        this.grid.load = false
      } else {
        this.grid.load = false
      }
    },
    searchQuery (type) {
      if (type) {
        this.grid.queryParams.pageNum = 1
        this.grid.queryParams.pageSize = 10
      }
      this.getList()
    },
    queryReset () {
      this.grid.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    async getCompaniesAllList () {
      const res = await companiesAllList()
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.companiesAllListFilter = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    getStore () {
      getAllStore().then((res) => {
        const { isSuccess, data: response, msg } = res
        if (isSuccess) {
          this.storeList = response
        } else {
          this.$message.newFun(msg, 'error', 2)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>

<style lang="less" scoped></style>
